بسم الله الرحمن الرحيم 


دورة متقدمة فقي M11‏ ۳۸11 
ٽÎليف‏ : mubarmej‏ 
يشير الإختصار M1‏ 1۲ إلى عبارة 9u29e‏ 2ا Hyper" ext Markup‏ أو لغة الترميز المتشعبة» وهذه اللغة هي اللفة المستخدمة في تصميم جميع صفحات الويب الإحترافية» فهل تريد أ ذ تصمه 


SNES ER 


04 


مقدمة 


تكتب ملفات ا1۲۷1 في صورة ملفات نصوص بسيطة ٠٠×(‏ ١أها۴)ء‏ تأخذ الإمتداد 1٣١.‏ عادة» وتكتب في أ ي برنامج للنصوص البسيطة؛ فو 
الويندوز استخدم 3۵٤٥ء‏ في اللينكس استخدم ١0٩1م»‏ في الماكنتوشن استخدم S| ٠"ماءع١ ٤۴×‏ جحميع هذه البرامج مناسبة جدا لعمل صفحار 
HTML‏ 


الأمر الآخر الذي ستحتاج إليه هو متصفح للإنترنت» ولن یکون أکثر من Explorer |٣٤۲٣ ٤‏ أو Netscape Navigator‏ أو الأثنين معاء وبما أنك الآر 
تتطلع على هذه الصفحة فلا بد من أنك تمتلك المتصفح أيضا» ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابهاء ولأن المتصفحات تختلف مر 
نوع إلى آخر لذا يفضل ا] د تقوم بمعابنة صفحتك بجمع المتصفخات الموجودة وتتأكد من انها تظهر بشكل شليم فى جميع المتصفخات. لأر 
الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لذلك فإن عليك التأكد من أ ذ الجمهور يستطيع رؤية الصفحة بمتصفحه أ 
کان. 


المشكلة التي قد تواجهك في كتابة صفحاتك هي دعم المتصفحات للغة العربية أولاء ودعمها لآخر التقنيات ثانياء يقدم متصفح ٤٥٣۲ءا"‏ 
orerاExp‏ من Microsoft‏ دعما رائعا للغة العربية» ولآخر تقنيات الويب مثل 4.0 11M)‏ و C55‏ و 1× وغيرهاء وأما متصفغفح Jetscape Navigator‏ 
فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج 50030 نف شركة صخو وفي كل الأحلا ظل مف غح 
Navigator Netscape‏ متصفحا متعبا في التصمیم لھذه الأسباب جمیعا اعتمدنا متصفح ٤"te۲ہn|‏ 5.0 erاoاExp‏ كمتصفح قياسي لصفحار 
موقعنا» فهي تظهر بشکل رائع فيه. 


آأخر إصدارة من متصفح ١.2۷1920١‏ عمهcعئtمN‏ هي الإصدارة 4.72 واخر إصدارة من برنامجح S| ١۵63۵0‏ هي 4.51 وقد توقفت شركة صخر عر 


رت 8۷10310۲ فی الاه الا خو لاب ات لا آعروها 


بعد كل هذا .. لغة 1۲١۷1‏ لغة وصفية سهلة جدا ذا ت قدرا ت عالية وميزا ت فريدة وقوية. جميع الصفحات العالمية متقنة التصميم تم إعدلده 
باستخدام لغة 1۲۷1ء تتميز ا1۲۷ أيضا بأنها ذا ت قواعد سهلة ومعروفة. تستطيع أيضا في لغة ا۷1٧1۲١‏ عمل الشيء نفسه بأكثر من طريقة 
لذلك ومهما كانت الطريقة التي تفكر بها ستجد أنك تحصل غالبا على ما تريده بالضبط. 


تتکون ملفات ۸۲۷1 من قسمین : 
٠‏ المحتوى : وهو ما يشاهده الجمهور في صفحتك. 
٠‏ الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهور ك المحتوى السابق» فهي تصف المحتوى من حيث التنسيق. 


متال على ذلك هذا اللسطر من لغة اMN‏ ۳11 .. 
HTML is a <b>Great</b> Language‏ 


تد اسعختام المتصفح كى مضاهدة الفط الضابق سنظمرهكا . 


HTML is a Great Language 


في المتال السابق تبدو أجزاء ملف ال ا۲۷١1‏ واضحةء المحتوى الذي يتمتل في عبارة ع٤39‏ 3۸01| اaعا6‏ ص كا اM١.‏ والوسوم المحاطا 
بعلامتي < و >. في المتال السابق استخدمنا وسما يدعى 0 وهو اختصار لكلمة 0010 (عريض)ء ويأتي في صورة زوج من الوسوم, وس 
للفتح ووسم للإغلاق. ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسمء وسم الفتح يعني أ ذ المتصف: 
يجب أ ذ يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق» مثل التشغيل والإطفاء . 
وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفاً هذه الميزة» وكما أ ذ هنالك وسما للخط العريض .. هنالك وسم للخط المائلء وآخ 
لتفيير الخطء ووسوم أخرى للجداو ل والصور» جميع عناصر ملف ا1۳۷1 يتم إدراجها عن طريق الوسوم وتحدد خصائصها أيضا عن طريق الوسوم. 


إذا أرد ت مثلاأً ذ تفير الخط في كلمة 6۲٤۵‏ في مثالنا السابق» سنحتاح إلى استخدام الوسم ۴۵0۸ء حیث سنستخدم الوسم ۴۵٣٤‏ بأن نضبد 
خاصية لون الخط في كلمة 6۲٠۵‏ إلى اللون الأحمرء ويتم هذا كالتالي .. 


HTML is a <font color="red">Great</font> Language 
.. حيٿ ستبدو هكذا‎ 
HTML is a Great Language 


في المتال السابق يتضح لنا أمر آخر» وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتى 
ال< وال> ونفصل بين اسم الوسم والخاصية بمسافة بيضاء» وتكون الخصائص في صورة إسم="قيمة" )أ ر إسم الخاصية ثم علامة المساوا 
ثم قيمة الخاصية بين أقوا س الإقتباس المزدوجة» في المتال السابق قمنا بضبط الخاصية 010١‏ للوسم ا١۴0‏ عند القيمة ۵١۲۴ء‏ وإذا كان هنال 
أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان» بحث نفصل كل خاصية والأخرى بمسافةء متلا .. 


HTML is a <font color="red" size="+1">Great</font> Language 


التي ستظهر هكذا .. 


HTML is a Great Language 
.. 1۲١1 أمور إضافية يجب أ ذ تعرفها عن‎ 


.>8< لغة 1۲۷1 لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرةء أ ي أنه في ا۳۲۷١ وضع <> لا يختلف عن‎ ٠ 

* يمكن إحاطة قيم الخصائص بعلامة إقتباس مزدوجة ( " ) أو مفردة ( ' )» ويمكن أيضا عدم إحاطتها بأي منها إذا كانت القيمة تتألف مر 
كلمة واحدة دو ذ مسافات. 

٠‏ بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه. 

٠‏ قد وقد لا يحتوي وسم الفتح على خصائص إضافية» ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص. 

٠‏ لفة ا1۲۷ لا تراعي المسافات البيضاء» وتعتبرها جميعا مسافة واحدةء أ ر أ ذز وضع مسافة واحدة بين كلمتين» يساو ي وض 
مسافتين» ويساو ي وضع تلاتين مسافة» ويساو ي وضع سطر جديد» ويساو ي وضع جدولة 0ه كلها تترجم إلى مسافة. 

ه٠‏ توضع التعليقات بين <!-- و --> ) بأ ن المتصفح يتجاهل أ ي شيء بينهما وكأنه غير موجحود. 


HTML le ai 
: یتکون ملف 1۲11 القياسي من جزئين رئيسيين هما‎ 


٠‏ الرأً س كهم1١‏ : يحتوي على المعلومات الإضافية الخاصة بالمستند مثل عنوا ذ الصفحة والكلمات المفتاحية فيها وغيرها من الأمو 
الخاصة بالصفحة والتي لا تعتبر من ضمن المحتوى. 
٠‏ الجسم ¥ك٥8‏ : وهو يحتوي على المحتوى الذي يرالد المستخدم. 
المتال التالي يبين كيفية تقسيم ملف اN×‏ 11 .. 


<html> 


<head> 


</head> 


<body> 


</body> 
</html> 


المتال السابق صريحء ولا يحتاج إلى المزيد من التوضيحء الأجزاء التابعة الا توضع بين <€30> و lÎ «<head/>‏ الأجزاء التابعة للجس 
فتوضع بين الوسمين <004¥۷> و </000¥> . 


يتم تحديد عنوا ذ المستند الذي يظهر في شريط العنوا ذ للمتصفح بإحاطته ب <ه|اأنأ> و </ءe|اانا>.‏ والمكان الصحيح لوسم ال <۴اااا> هھ 
الأ س حيث أ ذ الوسم ١‏ اأ لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة» وهو يستخدم في عمليات البحث والأرشفة كما فو 
مخركات البجت: ولا يمكنك. وضع وسوم تسيق اخرى بين وشمهى ال. 6اا 


وتوخد أيضا وسوم أخرى تخدد صفات المستتد تمسى وسوم ة6 توضع ايضا قي منطقة الرا س وسناتي اليها في أموز إضافية قي هذ 
الدورة. 


أما باقي الوسوم فأغلبها يوضع في منطقة الجسم .00۵y۷‏ 


الخطوط و الألوان 


الأنماط الأساسية 


أولا العناوين وهي من ستهة مستویات» العنوا ر الأو h1 J‏ والثاني h2‏ وهکذا حتی 06 .. 


لدد الققا .د شم إخاطةا بالوسة ° 


لتحديد اتجاه الفقرة استخدم الخاصية ١9ا2‏ قي الوسم ۴ 


Fight algned paragraph 


<h1>Heading 1</h1> 
<h2>Heading 2</h2> 
<h3>Heading 3</h3> 
<h4>Heading 4</h4> 
<h5>Heading 5</h5> 
<h6>Heading 6</h6> 


Heading 1 
Heading 2 
Heading 3 
Heading 4 


Heading 5 


Heading Û 


<p>Paragraph Text </p> 


Paragraph Text 


<p align="left ">Left aligned paragraph </p> 
<p align="center">Centered paragraph </p> 


<p align="right ">Right aligned paragraph </p> 


Left algned paragraph 


entered paragraph 


لعمل وصلة استخدم الوسم ه مع الخاصية ٠۲٠۴‏ لتحديد الوجهة» الوجهة قد تكون صفحة ١ا٣‏ وعندها يبدأ العنوا ذ ب م: وقد يكون عنوا 
موقع م وعندها يبدأ ب م؟: وقد يكون بريدا إلكترونيا وعندها يبدأ ب 0٤اأة":‏ »ستعرق المزيد عن المسارا ت عندما يأتي الحديث عن الصور فى 
الدر س القادم. وبين وسمي الفتح والإغلاق ضع المحتويات الساخنة أو الوصلة نفسهاء وهي قد تكون نصوصا أو صورا. 


<a href="http://www.microsoft .com/">Microsoft Corp. </a><br> 


<a href="mailto :mubarme j@ hotmail . com">My E-mail</a> 


Nicrosof orp. 
iy E-maul 


يوجد أيضا استخدام آخر للوسم ه باستعمال الخاصية ١.۵۳٥‏ بدلا من ۸۲6۴ (يمكن استعمال الإتنين معا)» وبعد ذلك تستطيع أ ذ تدرج وصل 
عادية تشير إلى المكان الذي به <ع٥۳ه,‏ ه="">. وذلك بجعل خاصية "۲٤١۴‏ الوصلة العادية تشير إلى الإسم المحدد فقي ۸3۳۴ مسبوقا بعلام 
#» متال ذلك إذا أرد تأ ذ تضع وصلة تقمد ك إلى جزء معين من المستند الحالي» ستقوم بعمل <ع3۳١۷""=‏ ۸4۳€ ه"></a>‏ في المكار 
المطلوب. تم تدرح وصلة في أ ر مكان آخر كالتالي <عa۳١۷"#"=۴٠۲‏ هa">إسمي</a>»‏ ويمكنك أيضا عمل ذلك عبر المستندا ت (مر 
مستند إلى مستند أخر) بحيث تحدد بالضبط المكان الذي تريده من المستند lالوجqةö href="salem.html#myname> li‏ a"<|إw‏ 
سالم</2>. 


يمكنك أيضا عمل وصلة إلى أعلى المستند بوضع ٥0#‏ في الخاصية .1۲١۴‏ 
لإجبار النص على الإنتقال إلى السطر التالي استخدم <۲ظ> . 
لإضافة مسافة استخدم ۸0508: (لعمل أكثر من مسافة واحدة) 


يمكنك استخدام الوسم ۲۴م لمنع المتصفح من تجاهل المسافات البيضاء ويحتسب المسافة مسافة والتلات مسافات تلات مسافات والسط 
الجديد سطرا حديدا. فقط بين الوسمين <0۲€> و </0۲€> . 


يمكنك توسیط أ ي شيء» بوضعه بین الوسمین <€ °> و </€۲ €> 
|لgسwمp Font‏ 


يعمل الوسم ا١0‏ دائما مع مجموعة من الخصائص. فهو لا يمتلك أ ي تأثير لوحدهء وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لون 


والتي تجحدد حجمه . 
أو [ خصائص الوسم ۴0١‏ هي الخاصية ۴٩٥‏ التي تحدد نوع الخط المستخدم 


<font face='"verdana'"'>Verdana Text</font><br> 


<font face='"Courier New">Courier New Text</font> 


Werdana Text 
Courier Naw Text 


بعد ذلك هنالك الخاصية 010١‏ المستخدمة لتحديد لون الخط (أنظر إلى الألها ز في الأسفل) 


"his is <font color="red">Red</font> 


ind this is <font color="blue'">Blue</font> 


This 1s Fed and thus 1s Blue 


الخاصية الثالثة هي الخاصية 2€6أء وهي تحدد حجم الخطء توجد سبعة أحجام للخط. والخط الأساسي في الصفحة يأخذ أحد هذه الأحجام 
وإذا أرد تأ ذ تفير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم ۴0١‏ مع الخاصية 2ء لزيادة حجم الخط أو إنقاصه بمقدا 
معين» إذا كا الخط الأساسي هو 3 فإنه يمكنك زيادة الخط 4 مرا ت حتى تصل إلى 7 وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح 1 وهو أصغ 
حجم للخط الخط الأساسي القياسي هو 3 ما لم تقم بتغييره» يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإضافة + قبل الرقم للزيادة و 
قبل الرقم للنقصان» وعند الزيادة فوق الحجم 7 سيعرض المتصفح النص بالحجم 7 وكذلك عند النقصان إلى أقل من الواحد فسوف يتم إعتبار 
1 


<font size='"+4'">Size 7</font><br> 
<font size='"+3'">Size 6</font><br> 
<font size='"+2'">Size 5</font><br> 
<font size='"+1">Size 4</font><br> 
<font size="0">Size 3</font><br> 

<font size='"—-1">Size 2</font><br> 


<font size="-2'">Size 1</font><br> 


S1ze 7 
S1ze 6 
S1ze 5 

Size 4 

IEE 2 

MIZE 


ee 1 


توحد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم <واط> و <ااج"ك> 


<big>size 4</big><br> 
<small>size 2</smal1l><br> 
<big><big>size 5</big></big><br> 
Size 3 

aze Î 


alze 4 


الطرف السافة لكي الخط مى طرةا تة 416 78 ل0ك قوم كير آلحظ بالنسة الط الا ساشى. تمك بها تجدد الخخم آلزة 
وده ال ا دو :ال تماد على الفط الاساسى عن طن الكاصة 6 انيا ولكق دو وو اا أف مال الحم المطاون 


<font size="7">Size 7</font><br> 


aan mi sall KI>C 1i sa Kece / Fant x<><hrx< 


<font size="5">Size 5</font><br> 
<font size="4">Size 4</font><br> 
<font size="3">Size 3</font><br> 
<font size="2">Size 2</font><br> 


<font size='"1">Size 1</font> 


S1ze 7 


S1ze€e 6Ö 
Size 5 
Size 4 

IZE 

IZE 


1 فاد 


يمكنك كذلك تفيير حجم الخط الأساسي في المستند وهذا سيؤثر على جميع الأماكن التي استخدمت فيها الأحجام النسبية للخطوط 
ونغير الخط الأساسي باستخدام وسم يدعى <١۴0٥ءةط>‏ ويمكن استخدامه لتغفيير حجم الخط الأساسي في المستند أو لون الخط 
الأساسي أو نوع الخط الأساسي. وهو لا يأخد قيم نسبية في الحجم (لا ينسب إلى نفسه). على سبيل المثال لتفيير الخط الأساسي 
إلى 3١ةل۲ه۷‏ بحجم 3 ولون أخضر نضع السطر التالي في المستند 


<basefont color="Green'" size="3'" face="Verdana ">‏ 
والوستة السايى لا تستخدم فى جز مخدد من تضوض_ ا ا بل بظهر تانرة فى الضفخة كلوا لزلك فهو ل يتاج إلى وسم اغلاق. 


توجد أيضا وسوم أخرى للتنسيقات المختلفة» مثلا الوسم 6 أو 9١٥۲ء‏ للخط العريض والوسم أ أو ٠۳‏ للمائل »و الوسم اا يستخدم لجعل 
الحرو ف متساوية في الحجم مثل نصوص الآلة الكاتبة 


<b>This</b> is Bold Text and <strong>this</strong> to!<br> 
but <i>This</i1i> is Italic Text and <em>this</em> to!<br> 


And <tt>This</tt> is Typewriter Text 


Thus ıs Eold Tezt and this tol! 
but Fis 18 talc Text and Ais tol 
And This 1s Typewriter Text 


يوجد وسم خاص بوضع الخط الأفقي هو الوسم ۸۲ يمكنك تحديد عرض الخط بالخاصية ١لأ‏ ۷ء حيث تأخذ الاس قيما مطلقة مثل 10 أو 293 
وهي تحدد العرض بالبكسلء وقيما نسبية تقاس بالنسبة إلى عرض الصفحة» مثل %20 و 85 %» توجد أيضا خاصية أخرى هي أك تحدد 
ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرةء وتوجد أيضا خاصية ١0ا0‏ لتحديد لون الخطء والخاصية ۸05130٥‏ وهي خاصية بدو ذ قيمة» وعند 
وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية 
This is the First Line‏ 
<hr>‏ 
This is the Secound Line‏ 
<hr color="Purple">‏ 
This is the Third Line‏ 
<hr width=" 30%" >‏ 
This is the Fourth Line‏ 


<hr noshade size='"40'""'> 


Thus 1g the First Line 


Thus 12 the Second Line 


Thus 1s the Third Line 


Thus 12 the Fourth Line 


يمكن أيضا استخدام بعض المتغيرا ت في وسم الجسم <لل0>ء وهذه المتغيرا ت تستخدم في تحديد تنسيق الصفحة مثل لون خلفي 
الصفحة ١١امءوط‏ وصورة الخلفية المتكررة 4١١9۲0۷)عةط.‏ ولون النص ا×ع ولون الوصلة الجديدة ٣ا‏ والقديمة ٣K‏ ااا والمحددة حاليl alink‏ 
وحاشية الصفحة العلوية ١أ2۲9١١‏ م٥0‏ والسفلية .rig htmargİn ”نiمnيلll, leftmargi¬ ڙéaرسږıیلlو butto ¬ ¬a۲9i¬‏ 


<body alink="red" link="yellow" vlink="blue" 
bgcolor="black" text="white" topmargin='" 0"> 

This is some Text. <br> 

And here are some links :<br> 

<a href="http://www. download. com/">Great Downloads</a><br> 
<a href="mailto:bgates@Ghotmail. com">Bill Gates! ?</a><br> 
<a href="http://www.msn. com/">Microsft Network</a><br> 


<a href="http://www. hotmail. com">Free E-mail</a> 


</body> 
This is sotme Text. 
And here ate some links : 


HTML ۈؤ”‎ i (gJJ| 


الألوا ذ في الكمبيوتر تنتج من خلط الألوا ذ الأساسية الضوئية الثلاثة». وهي الأحمر والأخضر والأزر ق يأخذ كل لون من الألوا ذ السابقة قيم 
تتراود بين 0 و 255 وهي مرتبة (أحمر أخضر أزر ة) أو (ع‌ںا۸,8٤٠6۲,١٠۸)‏ أو طو۲» في أ ي مكان نحتاج إلى أ ذ نضع فيه لونا نقوم بوضع الجمل 
التالية 


gb(R,6G,B) 
فنضع قيمة ال۸ في مكانها المناسب» وال6 وال8 كذلك» يمكن أيضا صياغة العبارة السابقة بصورة أخرى هي الصورة الستعشرية» نقوم بوضع‎ 
الأرقام السابقة بالتتالي في صورها الستعشرية» حيث أ ن أعلى قيمة عشرية للألوا ن هي 255 فإن أعلى قيمة ستعشرية لها هي ا وأقل‎ 
قيمة هي 00. لذا فإن كل رقم يأخذ خانتين كالتالي .. ۸۸6688# ويفضل وضع علامة # قبل الأرقام في الصيغ الستعشرية حتى تتعرفق عليها‎ 
جميع المتصفحات. أغلب الناس يستخدمون الصيغ الستعشرية في تكوين الألوا ن يمكن الحصول على القيمة الستعشرية من القيمة العشرية‎ 
.“ا١ل0سك باستخدام الحاسبة التي تأتي مع ال‎ 


تستطيع بالطريقة السابقة تكوين أكثر من 16.5 مليون لون»ء ولكن بعض الأجهزة القديمة لم تكن تدعم أكثر من 256 لون في نفس اللحظةء لذ 
فقد اتفق على 216 لون سميت بألوا ذ المتصفح الآمنة» فاذا التزم الجميع بهذه الألوا ذ سيستطيع المتصفحون أ ذ يستعرضوا أكثر من صفحا 


واحدة في نفس الوقت دو ذ مشاكل لأن عدد الألوا ذ التي يحتاجها المتصفح هي 216 فقط والباقي احتياطي للأمور الأخرى مثل الواجم 
وغیرها. 


إضافة إلى ما سبق هنالك ألوا ذ معروفة تستخدم بكثرة» ولها أسماء معروفة وعددها حوالي 141 لون»ء هذه الألوا ذ يمكنك استخدامها بوض 
اسمها فقطء وهي تنتمي جميعها للوح الألوا ذ الآمن والجدو ل التالي يبين أشهرها : 


اللون الصيغة الستعشرية اللإسم 
Red #fOOD |‏ 


<font size='"+1'""> 

<font color="Khaki'"> Sample 1 </font><br> 

<font color="#0066cc'"> Sample 2 </font><br> 

<font color="rgb (204,112,202) "> Sample 3 </font><br> 
</font> 


5 A11 1j le 1 
Sample 2 
sanıpleê 3 


الصور 


يمكنك في لغة ١۲۷1‏ عرض الصور في الصفحات والتحكم في خواصهاء قبل كل شيء يجب أ ذ تكون الصورة جاهرة للنشر على الويب» فيجد 
| د لا کون 5ا حخجم ضحم لان ذلك سيقد ء الى بط شديد قى التخمبل» ويجةة الخذر خبدا فد الفامل مخ الضون لانها تستولك خجما كبي 
وتسبب بطءا شديدا في تحميل الصفحات. لذلك يفضل التقليل من الصور قدر الإمكان في صفحات ا١‏ 1۲. 


لكي تستطيع عرض الصور في المستند يجب أ ذ تكون الصورة من النوع ومز أو أو (أنظر تجهيز الصور للنشر على الوبب). 
|lلjıgligl HTML‏ 
تستخدم العناوين في ا1۲۷ في الكثير من الأمورء أهمها الوصلات التشعيبية والصور ويجب أ ذ تعرف كيفية استخدام هذه العناوين جيدا. 


هنالك نوعان من العناوين» نسبية ومطلقة» العناوين النسبية تكون بالنسبة للعنوا ذ الحالي» فلو كنت متلا في صفحا 
pئْrosoft.com/ie/default.aاcاص.سWwسwس//:ttp‏ وقمت بعمل وصلة خاصیة ۸۲٤۴‏ لھا تساو ي dow nاoad. 1"١‏ سيعرق المتصفح أ ذ العنوا ذ الذو 
يجب الذهاب إليه ھو |" download. h†‏ /crosoft.com/!eاص.http://WwWw.‏ ولو کانت href‏ تساو ر اsh.htmاiاoad/engاnسd0‏ فسیتجه المتصف 
«http://www.microsoft.com/ie/download/english. html Jlj‏ أ i‏ ذ المتصفح يضيف السطر الموحود في ۸۲٤١۴‏ إلى الدليل الحاليء ويختلف 
الملف عن الدليل بأن الدليل يحتوي على الشرطة الخلفية ( / ) في آخره» في كل دليل يوجد دليل خاص» هذا الدليل الخاص يؤد ي بك إلو 
الدليل الأب للدليل الحالي وهو الرمز ( .. ) وفي المثال السابق لو كانت ۸۲٠۴‏ تحتوي على W05.۸١١١/..‏ ۷|۸0 فإن المتصفح سيتجه إلى العنوا 
http://www .microsoft.com/windwos. htm‏ أ ي أنه سيخرج من الدليل ١أ/‏ إلى الدليل الجذر ي /ء أما العناوين المطلقة فتتميز بأنها مسبوق 
باسم البروتوكول »متلا العنوا ذ /۸0://۷W۷W.4۷۸3.٤٥0۳‏ يعتبر عنوانا مطلقاء وليس له علاقة بالعنوا ذ الحالي. 


إدرا< الصور 


يتم إدراج الصور في صفحة 1۲۷1 عن طريق الوسم 6١۱۷ء‏ وهو وسم مفرد ( لا يجتاج إلى وسم إغلاق). وهذا الوسم يحتاج إلى خاصية مهم 
لكي يعمل بشكل سليم هي ۲١‏ والتي نضع بها عنوا ذ الصورة المطلوبة. 


<img src=" /images/sample.gif"> 


ا 


توجد أيضا الخاصية ۸لأ» لتحديد عرض الصورة وواه لتحديد ارتفاعها» يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها حسد 
المطلوب» وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص» فيحجر المتصفح للصورة حجما صغيرا إلى أ ن يحصل عليم 
فيجعلها بالحجم الطبيعي» ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصغيرة تزيڊ 
النصوص قليلا والكبيرة تزيحها بمقدار أكبر» فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إ ن يحصل المتصفح على الصورة وإذا ل 
يجدها لأي سبب من الأسباب سيظل يحجر لها حجما صغيرا فقط ويالتالي تصبح الصفحة مشوهة.ء لذلك ينصح دائما باستخدام خصائص الحجد 
في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي. 


<img src=" /images/sample. gif" 
width=73 height=68><br><br> 
<img src=" /images/sample. gif" 


width=200 height=100> 


توجد أيضا الخاصية ١9اة‏ وهي خاصية مهمة جدا في الصورء وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبا 
للنصوص المحيطة بها حيث أ ذ الصور في ا٧11‏ تعتبر جزءا من النص المحيط بها تتحرك معه»ء وترتبط به»ء تأخذ ١9اه‏ العديد من القيم فيما يلو 
سرد لها مع الشرح والأمثلة .. 


. وهي تعرض الصورة بحيث تكون على السطر مثل أ ي كلمة أخرى‎ : طهttom,‎ baseline, absbottom 


<img src=" /images/sample.gif" align="bottom'"> 


1 
1. 
lf ¥ou are trying to reach a secure site, make sure your Security setmgs cah support it. lick the Tools 


menu, and then cick Internet Wptons. n the Advanced tab, scroll to the Security section and check settings lof 
Sol 2U, SSL 30U, ILS 1U, FLT LD 


أ۴ا وى تعرض الصورة على يسار الفقرة ول ركون اللصورة علافة بالسظن 


<img src=" /images/sample.gif" align="left"> 


afte trymg to reach a secure site, make sure yout Security setihas can support it. Click the‏ ر 
Tools menu, and then cick Internet Jptiong. n the Advanced tab, scroll to the Security section and‏ 4 2 
E engt check setthgs for SSL 2.1, Bol 3.0, TLD 1.0, PFET 1.0.‏ 


eاabsmidd‏ ,eاddاm‏ : وهي تعرض الصورة في منتصف السطر. 


<img src=" /images/sample.gif" align="middle" > 


1 
f. Er you afte trig to reach a secure site, make sure your Security settings cai support it. lick the Tools 


E 


menu, and then cick Internet Jptons. On the Advanced tab, scroll to the Security section and check settings for 
I N I O O 


اة وهى تفرضن الضورة على يمين الففرة ولا يركون للضفرة علاقة بالسظ: 


<img src="/images/sample.gif" align="right "> 


lf ¥ou ate tryihg to reach a secure site, make sure your Security settings can support i. Lick the r e 
Tools menu, and then click Internet plons. n the Adranced tab, scroll to the Security section and r. 4 3 


ا 


check settings for SDL 20, SoL 30, TL LU, PET IU 


° مصtex>ttop tp,‏ : وهي تعرض أسفل السطر فيكون السطر أعلاها. 


<img src=" /images/sample.gif" align="right "> 


Ifyou ate trying to reach a secure site, make sure your Security settings can support ıt. Lick the ۳ e 
Tools menu, and then click Internet Cptons. Un the Adyanced tab, scroll to the Security section and r ام‎ 
check settings for SSL 2.0, oL 3.0, TLS 1.0, PET 1U. r imemet 


توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية 00۲۵86١‏ ونحدد بها عرض الإطار بالبكسل» والقيمة 0 تعني دو ن إطارء إذا لم تحدد قيم 
للخاضة 5006۴ كى وسم الصورة: فات. الأضةر ستظمر بتو د أطار فى. الحالة آلعادية .ومع آطار (ذا كانت الخو عة عن وصلة. للك ركف 
الناس إلى وضع 00۲۵۵۲="0" في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة» ويجدر بالذكر أ ذ لون الإطار في الوصل 
الجديدة هو نفس لون النصوص في الوصلة الجديدة وكذلك بالنسبة للقديمة. 


<a href="http://www.microsoft .com/"> 

<img src=" /images/sample.gif'"></a><br> 

<a href="http://www.microsoft .com/"> 

<img src=" /images/sample.gif" border="0"></a><br> 


<img src=" /images/sample.gif" border="3"> 


يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية €٥٤2م5٠.‏ 


توجد أيضا خاصية اة للصور» وهي تستخدم لوصف الصورة» بحيث أ ذ النص الذي تضعه في الخاصية اة سيعرض بدلا من الصورة حتى إتماه 


تحميلهاء وكذلك إذا لم يجد المتصفح الصورة» وهذه النصوص أيضا تظهر في مريع التلميح م١1001۲‏ عند التأشير بالفأرة على الصورة. 


حرانط الصور 


في بعض الأحيان تجد أ ذ هنالك صورة عليها أكثر من بقعة ساخنة كأمم؟ اه١‏ بوصلات مختلفة» هذه الصور يتم تقسيمها إلى مناطق متثل 
الخريطة» وما يلي هو كيفية عمل ذلك. 


تتكون الخريطة الصورية من جزئين» الخريطة والصورة» حيث نقوم بتصميم الخريطة وإعطائها إسماء تم نكتب هذا الإسم في خاصية |۵۳3٧‏ 
للصورة. 


في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة 


فا اردتا تقسيم الضورة الشايقة فسيكون التقميم (الخريظة) كالتالى 


أ ي بحيث يشير كل حزء من الأجزاء الثلاثة إلى أحد أقسام الموقع الإفتراضي» مهمتنا الآن هي رسم الخريطة السابقة وتحديد البقع الساخن 
والوصلات عليهاء ويتم ذلك باستخدام الوسم مء ونحدد إسم الخريطة بالخاصية ٠۳٠١ء‏ ونقوم بوضع الأشكال بين وسمي الفتح والإغلاة 
للوسم 3۲ء والأشكال تكون في صورة وسوم 3۲۴3 مفردةء نقوم بتحديد الشكل عن طريق الخاصية ٥۸30ء‏ ثم نقوم بتحديد الوصلة بالخاصي 
۴اا ونحدد إحداتيات الشكل بالخاصية 00۲۵5 ويختلفكل شكل عن الآخر بطريقة كتابة إحداثياته» والأشكال تلاثة هي : 


» ۷, ( وهو شكل الدائرة» وتكون إحداتياته عبارة عن الإحداثي السيني للمركز ثم الإحداثي الصاد ر للمركز ثم نصف القطر‎ : ciاعاه‎ ٠ 
„(radius 

٠‏ عع : وهو شكل المستطيل» وتكون إحداثياته عبارة عن الإحداثتي السيني للركن أعلى اليسار ثم الإحداتي الصاد ب له تم الإحداثى 
السيني للركن المقابل أدنى اليمين ثم الإحداثي الصاد يله (۷2 ,2× ,۷1 ,1»). 

٠‏ لاهم : وهو شكل المضلع» ويمكنك باستخدامه رسم الأشكال المكونة من عدة قطع مستقيمة» وتكون إحداثياته عبارة عن الإحداثي 
السيني ثم الصاد ي للنقطة الأولى ثم الثانية وهكذا حسب ما تشاء من النقط ×١, ۷١(‏ .. ,۷2 ,2× ,۷1 ,1×). 


ويجب أ ذ تعرفق أيضا أ ذ نقطة أعلى اليسار هي نقطة الصفرء وكلما تنزل إلى الأسفل تزداد قيمة الإحداثي الصاد ي وكلما اتجهت إلى اليسا 
تزذاذ قيمة الأحخذاثي السيتى. 


لمعرفة الإحداثيات المطلوبة نستخدمأً ي برنامج للرسم Paint Shop Pro 9i Adobe Photoshop Jin‏ „ 
قي فالتا السابق. تم جخسات الاخداتبات وكائن النتجة كالنالى : 


<img src=" /images/sample2.gif" usemap=" #mymap "> 
<map name="mymap "> 

<area shape="rect" href="http://www. jokes. com/" 
coords="6, 10,67, 44"> 

<area shape="circle" href="http://www. story. com/" 
coords='"121, 93, 27"> 


<area shape="poly'" href="http: //www. download. com/" 


COOEI355"537, 90, 753, 105, 59,129, 15, 129,4 105< 


</map> 


ستلاحظ الآن أ ذ الصورة مقسمة إلى عدة مناطق ساخنة كل منها يشير إلى وصلة مختلفة» عند النقر على أحدها يظهر حوله إطار أسود 
يمكنك إزاله هذا الإطار والتحكم بسماكته بالخاصية 00۲0۴١۲‏ في الوسم ٥م5۸3‏ تستطيع أيضا أ ذ تحدد ااج مختلف لكل قسم من الصور 
باستخدام الخاصية أاة في الوسم ۸3€؟Š.‏ 


<img src=" /images/sample2. gif" usemap=" #mymap" border="0'"> 
<map name="mymap "> 
<area shape="rect" href="http://www. jokes. com/" 

coords="6, 10,67,44" 

border="0'" alt=" Be Happy'"> 

<area shape="circle" href="http://www. story. com/" 
coords=" 121, 93,27" 

border="0" alt="Enjoy!'"> 

<area shape="poly" href="http: //www. download. com/" 
coords="37, 90, 73,105, 59, 129,15, 129, 4, 105" 


border="0" alt=" Best Downloads "> 


</map> 


تنظيم ١‏ لمحتوى 


يمكنك تنظيم المحتوى في لغة 1۲١۷1‏ في عدة أشكال» يمكنك مثلا وضعه في صورة قائمة مرتبة» أو في صورة شجرة (مخطط هرمي) وأه 


أنواء تنظيم المحتوى هي الجداو ل. 


يمكنك عمل القائم المرتبه باستخدام الوسم اه والغير مرتبة الا بحيث توضع البنود بينهما وكل بند يحدد بالوسم أا» ويمكنك تحديد نوع الترقيه 


في القوائم المرتبة بالحرو ف أو بالأقام العربية أو الرومانية وغيرها عبر الخاصية هما وتأخذ أحد القيم التالية : 


A g2 LE A 
..,a, b,c, d:a 
..,A, B,C, D:A 
أ ۷ ,اأ ,أأ ,أ,..‎ 


.,l, Il, lll, Vl 
: وفي القوائم الغير مرتبة‎ 


: circle 


ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية. 


<ul type="circle'"> 
<li>Pepsi 
<li>Crash 

<li>7 Up 

</ul> 


<ol type="1I"> 
<li>Windows (85%) 
<li>Linux (10%) 
<li>Mac (3%) 
<li>Other (25%) 
</ol> 


<ol> 


<li>American Companies 


<ol> 


<li>Microsoft 


<11 s>fanars=a1T1 Mar are 


</ol> 


<li>German Companies 
<ol> 
<li>Dubian 
<li >BMW 
<ul> 
<li>6 Class 
<li>7 Class 
</ul> 
</o1> 
</ol> 


o Feps1 
o rash 
ملا ۸ ت‎ 


Windows (B50) 
Linus (Io) 
ac aro) 
ther (Ao) 


EE 


1. #Armerıcah oimpaiues 
1. Microsoft 
2. ieneral lotors 


A4. etimah romp ales 


1. Dubiat 

A. BIW 
NEE 
= f lass 


الحداو ل 


تعتبر الجداو [ من أهم مكونات صفحات 1111ء وجميع التصاميم الإحترافية تستفيد من الجداو [ لتصميم الصفحة وتوزيع الكائنات عليم 
وتشكيلها في القالب الذي يريدونه» يتم إدراج الجدو ل بالوسم ۴ءا٥ة‏ وداخل الجدو ل يجب إدراج صفوف ١‏ وداخل الصفوف توجد البيانات 4 
يمكن وضع إطار للجدو ل بالخاصية 00۲۵8۲ حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دو ذ إطارء القيمة الإفتراضية للإطار هي 0. 


<table border=" 1"> 
<tr> 
<td>First ROow ¬- First Data 
<td>First Row ¬ Secound Data 
</tr> 
<tr> 
<td>Secound Raw - First Data 
<td>Secound Raw —- Secound Data 
</tr> 


</table> 


First Row - First Data First Row - Second Data 


cecound Raw - First Data Secound Raw - Secound Data 


يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية و١‏ |1٤ةمءاامء.‏ والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطا 
الخاصية 9¬ .cellpaddi‏ 


<table cellspacing="10" cellpadding="20'" border='" 1"> 
<tr> 
<td>First Cell</td> 
<td>Secound Cel1l</td> 
</tr> 


</table> 


First ell pecound ell 


يمكن التحكم بعرض الجدو ل بالخاصية ١الأW‏ وارتفاعه بالخاصية وام وكلاهما يأخذ قيما مطلقة أو نسب مؤية» ويمكن استخدام هذ 
الخصائص في الخلايا ل أيضا وعند إعطاء الخلايا قيما نسبية فإانها تحسب بالنسبة للصف الذي هي فيه. 


<table width="100%" height="100%" border="1"> 
<tr> 
<td width="100" height="40%">First Cell 
<td width="100%" height="40%">Secound Cell 
</tr> 
<tr> 
<td width="100" height="60%">First Cell 
<td width="100%" height=" 60%" >Secound Cell 
</tr> 


</table> 


First 
ا‎ eco el 


First 
اا“‎ pecound el 


يمكن التحكم بلون خلفية الجدو ل بالخاصية 09٤010١‏ ويمكن تعيين صورة في الخلفية بالخاصية ١١9۲0۷)٤0aء‏ يمكن استعمال هذه الخوا ص فو 
الخلايا ك أيضاء وعند تعيين قيمة ٤010١‏ 9ط للجدو ل مختلفة عن قيمة أحد الخلايا فان لون الخلية سيطغى على لون الجدو ل في تلك الخلية 
لأن الخلية موجودة فوق الجدو ل في ترتيب الطبقات. 


<table border="1'" background='"sample.gif'" width=" 90%" height="80%'"> 
<tr> 
<td bgcolor="Yellow">First Cell 
<td>Secound Cell 
</tr> 
</table> 


SeEcomd ell 


يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية ١9اه‏ ورأسيا بالخاصية ١‏ اج۷ في الخاصية ١‏ واج القيمة ۴۴ا تعني محاذاة لليسار و ألا 
لليمين و ١۸8۲ع‏ بالمنتصف و ۷؟أاكلاز للضبط الكلي تجعل الأسطر مساوية في الطولء أما الخاصية ١9اا۷a‏ فتأخد القيمة م٠‏ للأعلى» o0"‏ 
للأسفل ءال١۵أ"‏ للمنتصف. 


<table border="1'" width="90%" height="805%"> 
<tr> 
<td align="right" valign="bottom">First Cell 
<td align="left" valign="top">Secound Cell 
</tr> 
</table> 


Secound Cell 


First ell | 


يمكن أيضا وضع جدو ل داخل جدو ل عن طريق وضع الجدو ل في أحد الخلايا 0 وهنا يحسب عرض الجدو ل الداخلي النسبي بالنسبة لعرض 
الخلة الف نجوه والموخودة قى الخدو ا الكا رجف 


<table width=" 95%" border='"1'""> 
<tr> 
<td>First Table - First Cell 
<td> 
<table border=" 1"> 
<EE> 


<td>Secound Table —- First Cell 


<td>Secound Table —- Secound Cell 
</tr> 
</table> 
</tr> 
<tr> 
<td> 
<table border='" 1"> 
<tr> 
<td>Third Table - First Cell 
<td>Third Table —- Secound Cell 
</tr> 
</table> 
<td>First Table ¬- Fourth Cell 
</tr> 
</table> 


pecound Table - First pecound Table - Secound 


First Table - First ell اع اع“‎ 


Third Table - First Cell a اا‎ First Table - Fourth Cell 


يمكن أيض دمج الخلايا رأسيا بالخاصية١‏ 3م۲۷5 وأفقيا بالخاصية ١503ا0)»‏ حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخليا 
لالت تمذم هاو الكطانص كى الخلا 4ة 


<table border="1"> 
<tr> 
<td rowspan="2'" colspan="2">First Cell 
<td>Secound Cell 
<td>Third Cell 
</tr> 
<tr> 
<td rowspan="3'">Fourth Cell 
<td colspan="2">Fifth Cell 
</tr> 
<tr> 
<td>Sixth Cell 
<td>Seventh Cell 
<td>Eighth Cell 
<td>Nineth Cell 
</tr> 
</table> 


Tiret (ell F First ell 5 pecound ell 
dc ا‎ Fourth ell 


hth ell Ninth Cell El‏ ل 


Fifth th ell 1E peveEnth fell 


الأطر 
تستخدم الأطر ٠٣٠5‏ لتقسيم المتصفح إلى عدة إطارا ت واستعرا ض عدة صفحات في نفس الوقت» كما يمكنك تباد ل الأوامر بين هذ 
الصفحات. فيمكن عمل صفحة مستقلة تحتوي على فهرس الموقعء وبعد ذلك تضعها في صورة إطار يظل على يمين الشاشة» وكلما ضغد 


المستخدم على أحد الوصلات في الفهرس» يتم تحميل الصفحة في الإطار الآخر الذي على اليسار والذي يحتل الجزء الأكبر من الشاشا 
عادة. هذه الطريقة تتبع في الكثير من المواقع لتسهيل الأمورء فكيف يتم ذلك. 


في البداية هنالك صفحة الإطارا ت تحدد في هذه الصفحة تصميم طقم الإطارا ت الذي ستستخدمه»ء وما هي الصفحة التي يجب عرضها فو 
كل إطارء أ ذ كل صفحة تكون محفوظة في ملف مستقل لوحدها» في صفحة الإطارا ت ستستخدم وسوم الإطارا ت ولكن باقي الصفحار 
ستكون صفحات عادية غالبا دو ذ إطارا ت. 


أو [ وسوم الإطارا ت هو الوسم ا٤كع‏ "۳ ه۴ الذي يفتح مجموعة الإطارا ت وفي هذه المجموعة يوجد عدد من وسوم الإطار ۴١٣ه٣٣‏ المفردة ونض 
فيها مصدر الصفحة في الخاصية ۲١‏ أو يمكننا وضع ا5#٥"‏ ه٣۴‏ أخرى داخل ال مكعم" هr؟‏ الأولىء ويوضع الوسم ۴۲۵۳۴56 خارج منطقة الجسہ 
0۷ط دائما» نحدد في الوسم ۴۲۳858 إذا كنا سنقسم الصفحة أفقيا أو رأسياء ونحدد حجم كل إطار إذا كنا نريد تقسيم الصفحة رأسيا علو 
شكل أعمدة نستخدم الخاصية كا0» ونضع فيها عرض كل إطار بحيث يفصل بين كل إطار والآخر فاصلة ( , ) وهذه الحجوم قد تكون نسبية أ 
مطلقة وتختلف في احتواء النسبية على علامة النسبة المؤويةء وإذا أردنا تقسيم الصفحة أفقيا نقوم بعمل نفس الشيء ولكن باستخداء 
الخاصية ۲٥١۷١‏ بدلا من كاه متلا إذا أردنا تقسيم الصفحة رأسيا إلى ثلاثة أعمدة الأو ل بعرض 100 بكسل والثاني بعرض %10 من الشاشا 
والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا : 


<frameset cols='"100, 10%, *'""> 
<frame src="samplel. html "> 
<frame src='"sample2. html "> 
<frame src="sample3. html "> 


</ frameset > 


Page 1 Page 
2 


وکما ذکرنا يمكنك وضع ۴٣۵۳٤56‏ آخر بدلا من أحد الإطارا ڌ ٤۳ھr؟‏ 


<frameset rows='"50, *"> 
<frame src="samplel. html "> 
<frameset cols="100, *'""> 
<frame src="sample2. html "> 


<frame src='"sample3. html "> 


</ frameset > 


</ frameset > 


Page | 


TE 


Page 2Z 


يمكنك وضع أة إزالة الإطار الذئ رظمر بخول الألواد باستخدا م الخاصة ۲۵۳۸6۲0۲۵6۲ [ذا ضبتها عند القيمة 0 لن بظهر الأطار و1 بظهر الأطار 
يمكنك التحكم بحجم الإطار عن طريق زيادة أو إنقاص المسافة بين الألواح وذلك عبر الخاصية ۴٠١503۳1١9‏ فتضع فيها القيمة التي تريدها 
دوك عط ال اصن الساقانت عند 0 لمع الممه دة من ك ححم ا اك 


<frameset cols='"50%, *" frameborder='"0" framespacing='" 0"> 
<frame src="sample1l. html "> 
<frame src="sample2. html "> 


</ frameset > 


Page 1 Page 2 


يمكنك التحكم في ظهور أشرطة التمرير 83۲5 ااه٣)5‏ في كل إطار من الإطارا ت عن طريق الخاصية و١٠ااهاءء‏ وهي تأخذ القيمة ١٠ر‏ لإظها 
أشرطة التمرير دائماء والقيمة ٣٠‏ لمنع ظهورها دائماء و 0اه لإظهارها وقت الحاجة إليها فقط. 


<frameset rows='"20, *"> 
<frame src="sample1l. html" scrolling="no"> 
<frameset cols="100, *"> 
<frame src="sample2. html" scrolling="yes"> 
<frame src="sample3. html "> 
</frameset> 


</ frameset > 


Page 2 


لكي تستطيع أ ذ ترسل أوامرك ووصلاتك من لوح إلى آخر» يجب أ ن تقوم بتسمية أو عنونة الألواح بواسطة الخاصية ٠۳٠٠ء‏ وبعد ذلك لعمل 
وصلة بواسطة الوسم ه استخدم الخاصية ا3۲9۴ لتحديد وجهة الوصلة» يمكنك فتح الوصلة فقي شاشة متصفح جديدة ١K_‏ هام أو فتحها فو 
الشاشة الحالية فوق مجموعة الألواح _مه أو فتحها في اللوح الحالي _۴اعء أو فتحها في اللوح الأب (في حالة ألوا< داخل ألواح) _٤ہreهم‏ أ 
فتحها في أ ي لوح بوضع إسم اللوح. 


sample4. html <‏ ا 
<a href="sample1l. html "‏ 
target='"_ blank">Page 1</a><br>‏ 
<a href="sample3. html "‏ 
target="_ top">Page 3</a><br>‏ 
<a href="sample2. html "‏ 
target="main'">Page 2</a>‏ 
<a href="sample4. html "‏ 
target="main'">Page 4</a>‏ 
<frameset rows="20, *">‏ 
<frame src="samplel. html ">‏ 
<frameset cols="200, *">‏ 
<frame src="sample4. html ">‏ 
<frame src="sample3. html" name='"main'"">‏ 
</frameset >‏ 


</frameset> 


Page | 


إضافة إلى ما سبق يوجد أيضا إطار من نوع خاص يكون عائما في المستند مثل الصورة» يتم إدراج هذا الإطار في أ ي مكان بالمستند تح 
القسم 000۷ء ويقوم بعمل إطار ليعرض صفحة ا1٧1۲‏ خارجية» ووسمه هو |٣۳۴‏ وأهم خصائصه الخاصية ۲١‏ التي تحدد المستند المصد 
الذي يجب عرضه في الإطارء يمكنك أيضا عنونه بالخاصية ۸3۳١۴‏ وعمل وصلات موجهة إليه تماما مثل الإطار العاد ي» وفيما بقي فهو مثل الإطار 


يمتلك أيضا خاصية الأ و ااوامط لتحديد حجمة 


النماذ + 
إرسال البیانات عبر م٤"‏ 


عندما تريد إرسال المعلومات من متصفح الويب» إلى مزود الويب فإنك تستخدم بروتوكول م٤‏ في عمل ذلكء وينص بروتكول م٤‏ على أ 
البيانات ترسل في صورة أزواج كل زود عبارة عن إسم وقيمة»ء متلا إذا أرد ت إرسال إسم المستخدم عبر بروتوكول م فإنك ترسل العبار 
التالية ز٠"2۲۳ا۳"u=ع۳هم‏ هذا يسمى زوج لأنه يتكون من جزئين» الجزء الأو [ هو إسم المعلومة (ع٠۳ه١)ء‏ والجزء الثاني هو المعلومة نفسم 
(ز۳6اaطuص).‏ وإذا أرد تأ ذ ترسل أكثر من معلومة فانك تفصل بين أزواج المعلومات بعلامات & فاإذا أرد تأ ذ ترسل الإسم والبلد فانك ترسل 
العبارة llتlنليةö country=Kuwaitxuname=mubarmej‏ يمكنك أ ذ تكتب العبارة السابقة کJlتانلي name=mubarmej &country=KUWait‏ خیٿ] 
الترتيب ليس مهما إلى هذه الدرجة»ء إضافة إلى ما سبق فإن هنالك شروطا على إرسال البيانات في صورة عناوين ١۲ا‏ ولأن المعلومات عادة ه 
ترنسل ملتضقة بهذة القناوين قانة لا بد من تخويل سطر الجانات السابق حيبت يضبخ مطابقا لمواصفات أآناء وأو ل شيئيء هو انك لا تستط 
وضع المسافات. لذا فقد اتفق على أ ذ جميع المسافات في البيانات تحول إلى إشارة ( + )ء فإذا كان البلد هو لعلا كعاهاS‏ فإن سط 
البيانات سيكون زع”Statesuname=mub2a۲+country=United»‏ وهنالك أيضا شروط أخرى لتحويل الرموز الغفير انجليزية والكثير من الأشيا 
التي يتم تطبيقها على البيانات حتى تصبح جاهزة للإرسال. 


المساقات البيضاء : هى المساتات والاسط ر الديدة وعلامات الل 


ينص بروتوكول ما أيضا على أ ذ البيانات ترسل بطريقتين» الأولى تسمى اه9 والثانية تسمى اكهم. يتم إرسال البيانات بطريقة 96 بصور 
بسيطة جدا حيث تكون عبارة عن جزء يضاف إلى إسم البرنامج الذي سيستفيد من البيانات» مثلا إذا كان لديك برنامج يأخذ الإسم والبل 
ويخزتها على المزود» وكان عنوا ذ هذا البرنامج هو أك .أمأاm/scمc http://somewhere.‏ فإن طريقة ا٥9‏ ستقوم فقط بعمل إضافة إلى العنوا 
السابقة هذه الإضافة هي عبارة عن علامة استفهام يليما سطر البيانات الذي جهزته» فيصبح إسم الصفحا 
com/ script . cgi ?name=mubarme j & country=United+States‏ .ttPp://somewhereط‏ ولا بد من نك صادفت شیئا كکهذا وربه 
أكثر تعقيدا في مريع الوجهة في متصفحك خاصة عندما تزور المواقع الضخمة وتجري عمليات البحث وغيرها» ستجد كل هذه البيانات فو 
شريط العنوا ن هذا بالنسبة لطريقة ا6و في إرسال البيانات. أما الطريقة الثانية فهي طريقة أكهم وفيها يتم إرسال لوحدها مع طلب الموقع وا 
تظهر البيانات في شريط العنوا ن تختلف الطريقتان عن بعضهما البعض في أ ذ الطريقة ا96 أبسط بكثير ويمكنك بسهولة استخدامها كوصل 
عادية بأن تركب سطر البيانات بنفسكء ولكن اهم لا يمكن عملها في صورة وصلة بسهولة. حيث أنها لا تعمل إلى عن طريق النماذج ( الإثنا 
يعملان بشكل ممتاز بالنماذج )» لكن طريقة اهم أفضل من ا96 في أنها مناسبة لإرسال كمية كبيرة من البيانات مثل نص رسالة كاملة» حيذ 
يتعسر عرض هذه الأشياء في عنوا ذ الموقعء كذلك البيانات والإتصالات السرية يجب أ ذ تتم بطريقة أكمم ( هذا لا يعني أنها آمنة للشراء عب 
الويب وإنما تحتاج إلى تقنيات أخرى ). 


مهمه النمازح 


بعد أ ذز عرفت كيف يتم إرسال البيانات. يجب أ ذ تعرف مهمة النماذج في كل هذاء تعطيك النماذج واجهة سهلة لإدخال البيانات مثل مربعار 
النص وقوائم الإختيار ومريعات نعمالا والأزرارء وغيرها من الأدوا ت كل ما عليك فعله هو تحديد مكان البرنامب 
script. cgi)‏ /إttp://somewhere.com)‏ في متالنا السابق» والطريقة التي تريد اتباعما (أعg‏ أو ك0م). والبيانات التي تريد إرسالهاء وتحدد بعض 
الألوا ذ والأحجام وتصمم الحقول وتضع زر الإرسال (أ"5۷6) وانتهى الأمر» كل ما على زائر الصفحة الآن هوأ ذ يملا بعض الحقول ويختار بعض 
الخيارا ت» ويضغط زر الإرسال فيقوم المتصفح بجمع البيانات وتحويلها وتجهيزها تم إرسالها إلى المكان الذي حددته وحسب الطريقة التو 
حددتهاء النماذج بالفعل هي أفضل طريقة تفاعلية في لغة ا۷1١1۲.‏ 


يتم إدراج النموذ< بالوسم ۲0۲۳ ويتم إدرا< المعلومات في صورة وسوم ألام١|أ‏ مفردة». يحتوي الوسم 0۲۳ على مجموعة من الخو ص أهمم 
actin‏ وفيه تحدد عنوا ذ البرنامج الذي سيستفيد من البيانات. والخاصية الثانية هي ١0۵١ع"‏ وفيها تحدد طريقة نقل البيانات إما ائم أو get‏ 
أما الوسوم ام١¡‏ فأهم خاصية فيها هي عم وتحدد فيها نوع الكائن الذي سيأخذ المعلومة من المستخدم ويأخذ أحد القيم التالية : 


ه٠ e»‏ : وهو أشهر طرق إرسال المعلومات ويظهر في النموذج في صورة مريع نص يمكن للمستخدم إدخال أ ي شيء فيه. 

Button °‏ : لعمل زر ویستفاد من الزر في عمل أ ي شيء. 

>×0اChneck‏ : لعمل مریع اختیاں إذا تم اختیارھ فإنه يرسل القيمة 0١‏ وإذا لم يتم اختياره فإنه لا يرسل أ د معلومة. 

۰ اا۴ : لإرسال الملفات. 

Hidden °‏ : يرسل المعلومة التي تريدها بالقيمة التي تريدهاء ولا يظهرأً ي شيء في صفحة 1111ء تستطيع عن طريقه دمج معلوما 
ما داخل ملف ا1۲۷ بحيث لا يعلم عنها المستخدم ولا يحتاج إلى تغييرها. 

* ع وaص!‏ : تستخدم في الكثير من الأمور مثل الزر. 

wordككهP‏ : يستخدم لإرسال كلمة المرور» وهو يرسل كلمة المرور بصورة واضحة دو ذ أية تشفير وإنما يختلف عن مربع النص 
العاد ي في أ ذ الحرو ف تظهر في صورة نجوم ( * ). 

٠‏ di0هRa‏ : يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارا ز. 

هه Rese‏ : يستخدم لمحو محتويات النموذج وإعادته إلى الحالة الأصلية. 

Submit ٠‏ : يظهر في صورة زر يستخدم لإرسال المعلومات الموجودة في النموذج. 


يمكنك أيضا إرسال المعلومات مع النموذج بواسطة وسمين آخرين يوضعان أيضا بين وسمي 0۲١‏ وهذا الوسمان هما ا٤٥اعء‏ لعمل قائمة اختيا 
والوسم ۲۴× لعمل مريع نص متعدد الأسطر وبين وسمي ا٣٤6ا5€‏ نضع عدة وسوم 000١‏ كل واحد منها يعبر عن بند في القائمة ويكور 
لكل بند قيمة معينة وترسل قيمة البند الذي تم اختياره. 


ت 


لقد قمت بعمل برنامج صغير موجود على المزود يقوم بأخذ المعلومات التي ترسلها بأي من الطريقتين ويعيد لك النتائجح في صورة جدو 


إسم البرنامج أم.10ءeع‏ وهو موجود في الدليل الذي به هذا الملف لذا سنقوم باستخدام المسارا ت النسبية ونحدد الخاصية 3٤)0١‏ في تجارب: 
على القيمة أم.٠.1ءء‏ دائما. 


سنقوم في البداية بعمل أمتلة عامة وبعد ذلك سنركز على كل كائن من كائنات النموذج. 
أنظر إلى المتال التالي : 


<form action="echo.pl"> 

First Name : <input type="text" name="first_ name'"><brF> 
Secound Name : <input type="text" name=" secound name"><br> 
<input type="radio" name="exact'"> Exact Match 

<input type="radio" name="all'"> All Words<br> 

<input type="hidden" name="todo" value="search"> 

<input type="submit" value="Search'"> 


</form> 


First Name: | 
Secound Name: | 


O Exact Match O All Words 


سو واضا فى المال السابق كيف يم نفل المهلوفات كبر اليب ماستكناة فة ةن ,ا أعغدت التحرية السانقة باسحلاه الظرةة 64 
فسوف تحصل على نتائج مطابقة لأن البرنامج الذي أعددته (ام.۸0٤٠)‏ مجهز للتعامل مع الطريقتين. 


مربع النص 


نقوم بوضع مريع النص كما ذكرنا سابقاء باستخدام الوسم الام |٣‏ مع تغيير الخاصية عم له إلى القيمة ×6 ويمكننا وضع أ ي محتويات ابتدائي 
نريدها فيه عن طريق الخاصية ۷2۷٤‏ له ويمكن أيضا التحكم بحجحمه عن طريق الخاصية ع2/|ء. لتحديد طول المربع الذي نريده. 


<form action="echo.pl" method="get "> 
Username <input type="text" size="20" name="username '"><br> 
Email <input type="text" size="40" name="email "><br> 


URL <input type="text" size="40" name="url" value="http://"><br> 
<input type="submit "> 


</form> 


۱ 
ن‎ 
ump 


مربع الإختيار 


وهو يوضع بالوسم اام" | أيضا بتحديد الخاصية عمرا لها عند القيمة ×0(ط)٤٥۸ع»‏ ويمكن بالمعلومات التي سيتم إرسالها عن طريق الإسد 
بالخاصية ۸2١١۴‏ والقيمة بالخاصية €uلا‏ ۷۵ فیمکننا متلا أ ذ نجعل النموذج يرسل المعلومة ۵0=5165٤°۲١٥٤٥۴‏ إذا قام المستخم باختيار أحد مربعار 
الخيار» وذلك بضبط الخاصية ۸٣2۸١۴‏ له عند القيمة 0 والخاصية عuااة٠‏ له عن القيمة ۴٤٥١٣٤05طلاك.‏ وعند عدم اختيار مربع الخيار فلن يتم إرسال 


آي شيءَ يتعلق به. 
أ ي أنه مثل النوع ۸|۵8١‏ إلا المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو لا. 


<form action="echo.pl" method="get "> 


<input type="checkbox" name='"do'" value=" subscribe"> Subscribe. <br> 
<input type="submit "> 


</form> 


LÎ Subscribe. 


إرساام استحادم 


الاختيار من متعدد 


يمكنك عمل دوائر الإختيار من متعدد بواسطة وسوم ام۸ بحيث تضبط خاصيتها ٤م‏ عند القيمة 010ه. ولعمل مجموعة من الوسوم التى 
يجب على المستخدم اختيار أحدها قم بعمل وسم اام٣|!‏ لكل واحد منها واحعل قيمة الخاصية 13۸€ متساوية فيها حميعا مع تغيير قيما 
الخاصية ٤1ا۷2‏ في كل منها» فيكون عندنا نيابة عن جميع هذه الأزرار معلومة واحدة اسمها يحدد بالقيمة ١4۳۴‏ وقيمتها حسب قيمة الخاصيا 


مuاa‏ للزر الذي تم اختیارھ. 


<form action="echo.pl" action="get "> 


name="age'" value='"17'"> 10 ¬ 17<br> 
name='"age'" value="50'"'> 18 —- 50<br> 


name="age'" value='"100'"> 51 ¬ 100<br> 


name="gender" value="male'"> Male 


name="gender" value=" female'"> Female<br> 


Age : <br> 

<input type="radio" 
<input type="radio" 
<input type="radio" 
Gender : <br> 
<input type="radio" 


<input type="radio" 


<input type="submit "> 


</form> 
EE : 

O 10-17 
WW 18 - 50 
@ 51 - 100 
fender : 


O Male O Female 


إرسال استعكم 


تلاحظ من المتثال السابق أنك تستطيع فقط اختيار ٥ا2١‏ أو عماج۳٠۴‏ من القائمة الثانيةء لأنها يمتلكان نفس الإسم ۳۴ه٠.‏ 


القانمه 


عند تكوين القائمة نقوم أولا بوضع وسم القائمة أا>عاعء ونعين له خاصية ٥٣۳ه"١‏ التي ستظهر في النموذج. وبعد ذلك نقوم بوضع عدة وسو 
option‏ لكل منها خاصية ٤۷ا۷2‏ وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجود في الخاصية ٣2٣۳۴‏ من الوسم ا٤€۴اع5€‏ وقيمتم 


موحودة في الخاصية ع٥٤۷ااة۷‏ من الوسم ١٥أم0‏ الذي تم اختياره. 


<form action="echo.pl" method="get "> 


<select name="country "> 


<option value=" kw" >Kuwait 


<option value='"sa'">Saudia 


<option value="ua">Emirates 


<option value="qt ">Qatar 


<option value="bh'">Bahrain 


<option value=" om'" >Oman 


</select> 


<input type="submit "> 


</form> 


د 


مربع النص متعدد الأسطر 


ويمسى أيضا بالمساحة النصية ۲٤۴×2۲۴‏ وهو عبارة عن وسم 6×۲١‏ مزدوج ( فتح وإغلاق ) وبينهما تضع المحتويات التي تريدها أ ذ تظم 
داخل المربع» وهو يستخدم غالبا مع النملذج التي ترسل معلوماتها بالطريقة 05م لأنه يستخدم لإرسال كمية كبيرة من البيانات. 


يمكنك التحكم في عدد الأسطر بالخاصية ۲0۷5 وعدد الأحرفق في كل سطر بالخاصية 5ا0 ( عدد الأعمدة ). 


<form action="echo.pl" method="get "> 
<textarea name='"message" rows='" 6" cOls=" 50"> 
This Text will appear inside the box 1! 

WOW 
It's working :) 
</textarea><br> 
<input type="submit "> 


</form> 


This Text will appear inzide the pox 1! 
LIN 
It's working 


meta pgwg 


على الرغم من أ ن اسمها وسوم هع" إلا أنها ليست أكثر من وسم واحد هو الوسم ةأ" ! 


يستخدم الوسم ه٠"‏ لإعطاء المزيد من المعلومات حول الصفحة» مثل وصف الصفحة والكلمات المفتاحية للصفحة وإسم مؤلف الصفحة وإسد 
البرنامج المستخدم لتأليف الصفحة وغيرها من المعلومات» وجميع واصفحات ه۴٤"‏ توضع في ترويسة مستند ا1۲۷1 أ ي بين وسمي ۴24| 
وقذا اقفر طبيفغي لاتا ليست جوا من المختوك. 


تختلف واصفحات ها٠"‏ عن بعضها البعض بالخاصية "۵۳٠‏ أو ۷أاوع-ما!» توجد بعض البرامج تحدد نوع الوسم ۴4" حسب الخاصية |۳١٠‏ 
وبرامج أخرى حسب الخاصية ۷ا٩٠-م!‏ لذا فمن الأفضل وضع الإثنين. 


الخاصية التانية لوسوم ٣۴3‏ هي الخاصية ١٤١٥ء‏ التي تحدد محتوى المعلومة التي حدد ت اسمها بكل من الخاصيتين 131€ و ۷أ1ا4-مht.‏ 


الكلمات المفتاحية مثلا إسمها 5ل0۲س/ه)kء‏ فإذا كانت الكلمات المفتاحية في موقعك هي (ألعاب برامج صور مقلات درو س دورا ت)» فانك 
شتختاخ إلى ا ديكوت لديك الوسشم التالى : 
<meta name=" keywords" http-equiv=" keywords "‏ 


content="‏ ألعاب ,بر امج ,صور ,مقلات,د 5 رورا 
لاحظ من الوسم السابق أ ذ الكلمات المفتاحية يفصل كل منها عن الآخر بفاصلة عادية. 
وكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة» وتأخد الخاصية ۴٠۳ه"١‏ أو ۷أا۹ء-ما؟ أحد القيم التالية: 


keywords *‏ : لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل» ومرتبة حسب أهميتها ولا يجوز التكرار. 

description °‏ : لوضع وصف بسيط للصفحة ويفضل أ ذ لا يتعدى العشرو ذ كلمة. 

enerator‏ و : إسم البرنامج الذي استخدم لإنشاء الصفحة. 

author °‏ : إسم مؤلف الصفحة. 

* type-ntentدc‏ : لتحديد نسق البيانات وصفحة المحار ف المستخدمة. لصفحات ا۳1۷ العربية المكتوبة في الويندوز ضع الوسم 
کالتالي : 

<meta name="content-type" http-equiv="content-type" ° 


content="text/html; cahrset=windows—1256'"> e 


° اhاyriمpدc‏ : معلومات عن حقوق طبع الصفحة. 
تعريب الصفحات 
تتلخص إجراعا ت التعريب في جزئين رئيسيين. أولا إظهار الخطوط بصورة سليمة» وثانيا إظهار الإتجاه بشكل سليم. 


لإظهار الخطوط العربية بشكل سليم يجب التأكد من استخدام صفحات المحار ف العربية المنتشرة حاليا وهي »W|۸00۷5-1256‏ إذا كنت تكتب 
صفحاتك في ۷۸۵0۷5 فهذه هي صفحة المحار ف القياسية» ما عدا 2000 كسه0ل١‏ ۷1 فهو يستخدم صفحة المحار ف العالمية الموحد 
nicodeل.‏ وأما إذا كنت تكتب صفحاتك في بيئة ×لا٣|ا)‏ ×أ٣لا‏ مثلا) فإن ذلك يعتمد على البرنامج الذي تستخدمه لتعريب النظام. 


و في جم الأول السابقة فانك تحخ ف ط الوم هع" الخاص بنوع المحتوى عمرا-خمعtمهc‏ عند قيمة مناسبة. 


أما تغيير اتجاه الصفحات فيتم بعدة طرق أو ل طريقة هي استخدام الوسم م وضبط الخاصية ١9اه‏ له عند القيمة ۲|9٠‏ وهي طريقة بسيطة 
ونافعة» ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداو ل والتنسيقات» أما الطريقة الثانية وهي الطريقة الأفضل 
فهى استخدام الخاصية ٣أ‏ فى الوسم ٣۳١١‏ وضبطه عند القيمة »٠٣١‏ قوم ذلك بجعا , الصفحة تتجه كليا من البمين إلى اليسارء بحيث تصبح 


الفقرا ت تتجه من اليمين إلى اليسارء والعناوين تتجه من اليمين إلى اليسار وتصبح الخلية الأولى في الجدو ل هي الخلية الأولى على 
اليمين» وهذه الميزة متوفرة تلقائيا في متصفح ١٤0۲م×٤‏ أاعمماعtاما‏ وهي غير متوفرة في Netscape N3۷1920١‏ ولكن عند تركيب »Sindbad‏ 
فان هذه الميزة تظهر في صورة زر في على شريط العنوا ذز حيث يحدد المستخدم الإتجاه الذي يريده يدويا ولا تؤتر الخاصية ١أ‏ على الصفحة 


<html QdiIE="rtEll> 
HTML cl |e 


الآن وقد انتهيت من تعلم لغة ا1۲۷1 فلا يسعنا أ ذ نقول أنك انتهيت من تعلم مهنة تطوير الويب و١‏ أمهام۷اع0 طع ۷ . ظا زلا أمامك للأثير 
لتتعلمه حتى تصل إلى المستوى الإحترافي الذي نطالب به جميع العرب» فتقنيات الويب تتجدد باستمرار ويصبح اللحاق بها كلها أمرا مستحيا 
على الضعفاءء أما الأقوياء فهم على الطريق بثبات وبعزمهم وإصرارهم أصبحوا روادا في عالم الكمبيوتر والإنترنت الرائع» بقي علينا أ ذ نعلمل 
ببعض هذه التقنيات وكيفية الحصول على المزيد من المعلومات عنهاء ونعدك بان سنواكب جميع هذه التقنيات في دورا ت مستقبلية ) ذ شا 
الله لنؤد ي دورنا إلى جميع العرب. 


أورا ق الأنماط المتتالية 


أورا ق الأنماط المتتالية أو أمعاS‏ عارSt‏ وadinعكCas‏ أو C55‏ هي تقنية تستخدم للتحكم في الكيفية التي يجب أ ذ تظهر بها الوسوم في صفح 
ويب» فمثلا العنوا ذ الرئيسي 11 يظهر باللون الأسود وبخط عاد ب وطريقة عادية» ولتغفییره کان لا بد من وضع وسم ۴٥١‏ داخل كل وسم ٠١1‏ 
فماةا لو ااستطعا | د تحدد تحن كف تريد لفنوا ز الضفخة الرتيسى ) د تظهو وكيف تخت ] د تظمر الخداو ل وكيف رجت ]1 د نظ مر خم الونسة 
الأخرى في لغة ا1۲۷1 الآن يمكننا عمل ذلك باستخدام تقنية 55ء وقد تم تطوير هذه التقنية على المدى الأعوام السابقة حتى وصلنا إلو 
النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعة كبيرة من الوصلات والكتد 
والدaرl [http://www.w3.org/Style/CSS : i‏ 


لغة الترميز القابلة للتوسع 


لغة الترميز القابلة للتوسع أو ٣9u 29٤‏ ةا Markup‏ ماطeXtensib‏ أو اXM×‏ هي عبارة عن تقنية جديدة بحيث يتم التخلص من الوسوم القياسي 
ويصبح لكل شخص وسومه الخاصة به فبد أ ذ ظهرت تقنية ٥55‏ أصبح أمر الوسوم غير مهماء فيمكنني مثلا أ ذ أقوم بجعل الوسم ۸6 الذي ( 
أستخدمه كثيرا يصبح وسما خاصا له لون خاص وشكل خاص أستخدمه في كتابة الملاحظات مثلاء بحيث يصبح لونها أحمرا وتكون مبروزة ببروا 
جميل ولافته للنظر» وهكذا أصبح الإسم ۸6 لا يشير إلى شيءء فما الفائدة منه الآن ! 


لذا فقد ظهرت فكرة لغة الترميز القابلة للتوسع بحيث أنك تقوم بعمل الوسوم وتسميها بأي اسم تريده» وتحدد كيفية ظهور المحتوى الذو 
بداخل الوسم عن طريق أورا ق الأنماط المتتاليةء للمزيد عن ۷1× إذهب إلى قسم 1× في مجمع الويب : [http://www .w3.09/XML‏ 


لغة الجافا سكريبت هي عبارة عن لغة برمجة محدودة» مخصصة للعمل في صفحات ويب لتوفير صفحات متغيرة ( ديناميكية )» فيمكنك عمل ز 
ينفذ عمليات خاصة على جهاز الزيون دو ذ إرسال المعلومات إلى مزود ويب» وتستخدم بشكل كبير في الصفحات الشخصية في عمل الحركان 
والتأثيرا ت الفنية والحركية وقد ظهرت أخيرا العديد من المواقع التي توفر سكريبتات جاهزة ورائعة لتقوم بنقلها وإضافتها إلى موقعك بسهولة 
للمزيد من المعلومات عن لفة الجافا سکریبت إذھهب إJlى‏ موêgژgچg‏ : /http://javascript.internet.C0©M‏ أو موق 
./http://www.dynamicdrive. com‏ 


البرمجة جهة المزود 


البرمجة جهة المزود هي طريق يتم فيها تركيب الصفحات وصنعها ديناميكيا طبقا لمواصفات متفق عليها لتباد ل البيانات» وتسمى هذ 
المواصفات واجهة البوابات الشائعة أو ٥۲۴٠ا"‏ | Gateway‏ onرصصC‏ أو اC6.‏ ويمكن كتابة البرامج بأي لفة من لغات البرمحة بشرط أ ذ يعمل 
البرنامج حسب مواصفات ا6ء ولكن أشهر لغات البرمجة استخداما هي لغة ۲۴٩۲١‏ وهي تتميز باحتواءها على العديد من الميزا ت ووظائة 
معالجة النصوص المطلوبة في عمليات إنشاء الصفحات ديناميكيا» وهي لغة عامة وليست لفة مخصصة لكتابة برامج ا6٥‏ فقطء على العكس 


من لغة ۴۳١۴‏ الجديدة وهي لفة مخصصة كليا لعمل الصفحات الديناميكية وهي اللغة المستخدمة لجعل موقع مبرمج يظهر بمظهره الموح 
والمتناسق والمترابطء وتوجد أيضا لغة ۸5۴ من مايكروسوفت أيضا ولكنها مقصورة على مزودا ت ١1‏ فقط ولا تعمل في مزودا ت ×ا١ل‏ الوس 
انتشارا» للمزيد من المعلومات حول |۲6۲ رlجg‏ : |http://www. php.net gجlر PHP ةغJl Jaz تlnglenJ, /http://www. perl.com‏ 


